<template>
  <div class="center" v-if="token">
    <div class="center_header">
      <img
        src="@/assets/8945ae63d940cc42406c3f67019c5cb6.png"
        alt=""
        class="header_pic"
      />
      <div class="header_content">
        <div>{{ centerInfo.userInformation.nickName }}</div>
        <div>{{ centerInfo.userInformation.lv }}</div>
      </div>
      <van-icon name="chat-o" class="header_right" />
    </div>
    <div class="myProperty">
      <p class="myProperty_title">我的资产</p>
      <div class="myProperty_ctList">
        <div
          class="ctList_ctItem"
          v-for="item in centerInfo.myPropertyList"
          :key="item.id"
        >
          <b>{{ item.count }}</b>
          <span>{{ item.content }}</span>
        </div>
      </div>
    </div>
    <div class="mounthCard_wrap">
      <div class="mounthCard">
        <div class="mounthCard_cardImg"></div>
        <div class="mounthCard_titleIcon"></div>
        <span class="mounthCard_tip">| 花3得34元 一笔回本</span>
        <van-button type="warning" size="small" class="mounthCard_btn"
          >限时开通</van-button
        >
      </div>
    </div>
    <div class="growBox"></div>
    <div class="banner">
      <img
        src="../../../static/image/Snipaste_2023-04-06_16-12-49.png"
        alt=""
      />
    </div>
    <div class="useList">
      <div class="useItem" v-for="item in centerInfo.cardsList" :key="item.id">
        <van-icon :name="item.iconStyle" />
        <div>{{ item.content }}</div>
      </div>
    </div>
    <div class="btn_edit">
      <van-cell is-link @click="showPopup"><span>退出登录</span></van-cell>
      <van-popup v-model:show="show" :style="{ padding: '64px' }" closeable>
        <van-space direction="vertical" style="text-align: center" :size="20">
          <div style="font-size: 16px">退出登录？</div>
          <van-button @click="editLogin">确定</van-button>
        </van-space>
      </van-popup>
    </div>
  </div>
  <ToLogin v-else></ToLogin>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Center',
})
</script>

<script lang="ts" setup>
import router from '@/router'
import { ref } from 'vue'
import ToLogin from '@/components/ToLogin/index.vue'
import { onMounted } from 'vue'
import useCenterStore from '@/stores/center'
import { storeToRefs } from 'pinia'
import type { CenterInfoData } from '@/stores/center'
const centerStore = useCenterStore()
const { centerInfo } = storeToRefs(centerStore)
const show = ref(false)
const token = localStorage.getItem('token')
function showPopup() {
  show.value = true
}
//确定退出登录
function editLogin() {
  localStorage.removeItem('token')
  router.push('/home')
}
onMounted(() => {
  centerStore.getCenterInfo()
})
</script>

<style scoped>
.center .center_header {
  height: 135px;
  background-image: url('https://yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png');
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.center .center_header .header_pic {
  width: 71px;
  height: 71px;
  border-radius: 50%;
}

.center .center_header .header_content {
  flex: 0.7;
  margin-left: -10px;
  font-size: 16px;
}

.center .center_header .header_right {
  font-size: 20px;
}

.myProperty .myProperty_title {
  font-size: 15px;
  margin: 12px 0 0 12px;
  padding-bottom: 15px;
  font-weight: 500;
  border-bottom: 1px solid #dddddd;
}

.myProperty .myProperty_ctList {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  padding-top: 15px;
}

.myProperty .myProperty_ctList .ctList_ctItem {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 15px;
}

.mounthCard_wrap {
  padding: 12px;
}

.mounthCard {
  display: flex;
  align-items: center;
  height: 45px;
  background-color: #fff6f4;
  border: 1px solid #fde7e5;
  border-radius: 8px;
}

.mounthCard_cardImg {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-left: 10px;
  background-image: url('https://yanxuan.nosdn.127.net/static-union/1679024383124f83.png');
  background-size: cover;
  vertical-align: middle;
}

.mounthCard_titleIcon {
  width: 65px;
  height: 15px;
  background-image: url('https://yanxuan.nosdn.127.net/static-union/1679024383363de7.png');
  background-size: cover;
  margin: 0 5px;
}

.mounthCard_tip {
  flex: 1;
}

.mounthCard_btn {
  margin-right: 10px;
  height: 25px;
}

.growBox {
  height: 10px;
  background-color: #eeeeee;
}

.banner {
  padding: 10px 13px;
}

.banner img {
  width: 100%;
  height: 47px;
}

.useList {
  border: 1px solid #d8d8d8;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.useList .useItem {
  height: 90px;
  width: 33%;
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  box-sizing: border-box;
  text-align: center;
  padding-top: 23px;
  font-size: 23px;
  color: #666666;
}

.useList:after {
  content: '';
  width: 33%;
}

.useList .useItem div {
  margin-top: 5px;
  font-size: 14px;
  color: #333333;
}

.btn_edit {
  padding: 20px 0;
  background-color: #eeeeee;
}

.btn_edit span {
  display: block;
  background-color: white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 15px;
}
</style>
